<template>
  <div class="nav-header">
    <i class="img-container"><img src="../../../static/img/scan.png" alt="" id="left-img"/></i>
    <div id="top-search">
      <router-link to="/search">
        <img src="../../../static/img/search.png" alt="" id="left-message">
        <span>搜索热门医院、养老院</span>
      </router-link>
    </div>
    <i class="img-container">
      <router-link to="/message">
        <img src="../../../static/img/title_message.png" alt="" id="right-img">
      </router-link>
    </i>
  </div>
</template>

<script>
  export default {
    name: 'nav-header'
  }
</script>

<style type="text/css">
  .nav-header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(33, 150, 243, 0) ;
    height: 90px;/*rem*/
    box-sizing: border-box;
    padding: 18px 28px 22px 28px;/*rem*/
    display: flex;
    align-items: center;
  }
  .img-container{
    display: flex;
    justify-content: center;
  }
  #top-search{
    display: inline-block;
    flex: 1;
    /*width: 70%;*/
    background-color: #fff;
    border-radius: 10px;/*rem*/
    padding: 10px 18px 8px 18px;/*rem*/
    text-align: left;
    font-size: 24px;/*px*/
  }
  #top-search img{
    vertical-align: middle;
  }
  #top-search span{
    color: #666;
  }
  #left-img{
    text-align: center;
    height: 40px;/*rem*/
    width: 40px;/*rem*/
    margin-right: 44px;/*rem*/
  }
  #right-img {
    width: 40px;/*rem*/
    height: 40px;/*rem*/
    margin-left: 44px;/*rem*/
  }
  #left-message{
    width: 30px;/*rem*/
    height: 30px;/*rem*/
  }
</style>
